//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Modal,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;


// 修改表单
@Form.create()
class UpdateForm extends PureComponent {
    static defaultProps = {
        handleUpdate: () => {},
    handleUpdateModalVisible: () => {},
values: {},
};

constructor(props) {
    super(props);

    this.state = {
        formVals: {
                id: props.values.id,
                tablename: props.values.tablename,
                tableid: props.values.tableid,
                columnname: props.values.columnname,
                columncode: props.values.columncode,
                columntype: props.values.columntype,
                columnsequence: props.values.columnsequence,
                columnlength: props.values.columnlength,
                display: props.values.display,
                memo: props.values.memo,
        },
    };


}

 handleLocalUpdate = () => {
    const { form, handleUpdate } = this.props;
    const { formVals: oldValue } = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formVals = { ...oldValue, ...fieldsValue };
      this.setState(
        {
          formVals,
        }
      );
     
     handleUpdate(formVals);

    });
  };


renderContent = (formVals) => {
    const { form } = this.props;

    return (
        <Form  layout="vertical">


                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                    <Col  md={12} sm={24}>
	                    <FormItem  label="名称">
	                        {form.getFieldDecorator('tablename', {
	                        rules: [{ required: true, message: '请输入名称！', min: 1 }],
	                        initialValue: formVals.tablename,
	                        })(<Input placeholder="请输入" />)}
	                    </FormItem>
                    </Col>
                    
                    										

                    <Col  md={12} sm={24}>
	                    <FormItem  label="列名称">
	                        {form.getFieldDecorator('columnname', {
	                        rules: [{ required: true, message: '请输入列名称！', min: 1 }],
	                        initialValue: formVals.columnname,
	                        })(<Input placeholder="请输入" />)}
	                    </FormItem>
                    </Col>
                    

                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
										
										
                    <Col  md={12} sm={24}>
	                    <FormItem  label="列编码">
	                        {form.getFieldDecorator('columncode', {
	                        rules: [{ required: true, message: '请输入列编码！', min: 1 }],
	                        initialValue: formVals.columncode,
	                        })(<Input placeholder="请输入" />)}
	                    </FormItem>
                    </Col>
                    
                    										

                    <Col  md={12} sm={24}>
	                    <FormItem  label="列类型">
	                        {form.getFieldDecorator('columntype', {
	                        rules: [{ required: false, message: '请输入列类型！', min: 1 }],
	                        initialValue: formVals.columntype,
	                        })(<Input placeholder="请输入" />)}
	                    </FormItem>
                    </Col>
                    

                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
										

                    <Col  md={12} sm={24}>
	                    <FormItem  label="列长度">
	                        {form.getFieldDecorator('columnlength', {
	                        rules: [{ required: false, message: '请输入列长度！', min: 1 }],
	                        initialValue: formVals.columnlength,
	                        })(<Input placeholder="请输入" />)}
	                    </FormItem>
                    </Col>
                    
                    <Col  md={12} sm={24}>
	                    <FormItem  label="列顺序">
	                        {form.getFieldDecorator('columnsequence', {
	                        rules: [{ required: false, message: '请输入列顺序！', min: 1 }],
	                        initialValue: formVals.columnsequence,
	                        })(<Input placeholder="请输入" />)}
	                    </FormItem>
                    </Col>


                </Row>
                
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			        <Col md={12} sm={24}>
				        <FormItem label="是否显示">
				            {form.getFieldDecorator('display',{
				            	rules: [{ required: true, message: '请选择是否显示！'}],
				            	initialValue: formVals.display + '',
				            })(
				                <Select placeholder="请选择" style={{ width: '100%' }}>
				                        <Option value="0">否</Option>
				                        <Option value="1">是</Option>
				                        
				                </Select>
				            )}
				        </FormItem>
			        </Col>
			  	</Row>
                
    </Form>
);

};



render() {
    const { updateModalVisible, handleUpdateModalVisible, values} = this.props;
    const {  formVals } = this.state;

    return (
        <Modal
    width={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="修改"
    visible={updateModalVisible}
    onOk={() => this.handleLocalUpdate()}
    onCancel={() => handleUpdateModalVisible(false, values)}
    afterClose={() => handleUpdateModalVisible()}
>

    {this.renderContent(formVals)}
</Modal>
);
}

}

export default UpdateForm;